<template>
    <div class="add-book-form">
      <h2>Add a New Book</h2>
      <form @submit.prevent="submitForm">
        <div>
          <label for="title">Title:</label>
          <input type="text" id="title" v-model="book.title" required />
        </div>
        <div>
          <label for="author">Author:</label>
          <input type="text" id="author" v-model="book.author" required />
        </div>
        <div>
          <label for="description">Description:</label>
          <textarea id="description" v-model="book.description" required></textarea>
        </div>
        <button type="submit">Add Book</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        book: {
          title: '',
          author: '',
          description: ''
        }
      };
    },
    methods: {
      submitForm() {
        // Logic to handle form submission, e.g., sending data to an API
        console.log('Book added:', this.book);
        // Reset form
        this.book.title = '';
        this.book.author = '';
        this.book.description = '';
      }
    }
  };
  </script>
  
  <style scoped>
  .add-book-form {
    margin: 20px;
  }
  .add-book-form h2 {
    margin-bottom: 10px;
  }
  .add-book-form form {
    display: flex;
    flex-direction: column;
  }
  .add-book-form label {
    margin-bottom: 5px;
  }
  .add-book-form input,
  .add-book-form textarea {
    margin-bottom: 15px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .add-book-form button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .add-book-form button:hover {
    background-color: #218838;
  }
  </style>